<template>
    <div class="onlyoffice-viewer-container">
        <div id="onlyoffice-editor"></div>
    </div>
</template>

<script>
export default {
    name: 'onlyofficeViewer',
    props: {
        // 获取的文件路径
        fileUrl: {
            type: String,
            required: true
        },
        // 文件名
        fileName: {
            type: String,
            default: 'fileName'
        },
        // 是否可编辑
        editable: {
            type: Boolean,
            default: false
        },
        // 用户
        user: {
            type: Object,
            default: () => ({
                id: this.$store.state.user.id,
                name: this.$store.state.user.name,
            })
        }
    },
    data() {
        return {
            docEditor: null //声明onlyOffice编辑器实例子
        }
    },
    watch: {
        // 监听 fileUrl 的变化
        fileUrl(newVal) {
            if (newVal) {
                this.initOnlyOffice();
            }
        }
    },
    mounted() {
        if (this.fileUrl) {
            this.initOnlyOffice();
        }
    },
    beforeDestroy() {
        this.destroyEditor();
    },
    methods: {
        // 初始化 OnlyOffice 文档编辑器实例
        initOnlyOffice() {
            // 清理旧编辑器实例
            this.destroyEditor();

            // 获取文件信息
            const fileExt = this.getFileExtension(this.fileUrl);
            const docType = this.getDocumentType(fileExt);

            // 构建编辑器配置
            const config = {
                document: {
                    fileType: fileExt,                  // 文件扩展名（如 "docx"）
                    key: this.generateDocumentKey(),    // 生成唯一文档标识（避免缓存）
                    title: this.fileName,               // 界面显示的文档名
                    url: this.fileUrl,                  // 文件实际访问地址
                    permissions: {                      // 权限控制
                        edit: this.editable,            // 是否可编辑（来自props）
                        download: false,                 // 允许下载
                        print: true,                    // 允许打印
                        review: this.editable           // 是否开启审阅模式
                    }
                },
                documentType: docType,      // 文档类型（决定编辑器模式）
                editorConfig: {
                    mode: this.editable ? 'edit' : 'view',      // 编辑/查看模式
                    lang: 'zh-CN',                              // 界面语言
                    callbackUrl: "",
                    // 监听事件
                    events: {
                        // 文档加载完成事件
                        onDocumentReady: () => {
                            this.loading = false;
                            this.$emit('ready');
                        },
                        // 错误事件
                        onError: (error) => {
                            console.error('OnlyOffice错误:', error);
                            this.$emit('error', error);
                        },
                        // 文档状态变化事件
                        onDocumentStateChange: (event) => {
                            this.$emit('state-change', event.data);
                        }
                    },
                    // 当前用户信息
                    user: {
                        id: this.user.id,
                        name: this.user.name
                    },
                    // 界面定制
                    customization: {
                        autosave: true,             // 自动保存
                        comments: true,             // 显示评论
                        compactHeader: false,       // 不使用紧凑工具栏
                        feedback: false,            // 隐藏反馈按钮
                        help: false,                // 隐藏帮助按钮
                        plugins: false              // 禁用插件
                    }
                },
                // 编辑器宽度
                width: '100%',
                height: '100%'
            };

            if (typeof DocsAPI !== 'undefined') {
                // 初始化编辑器实例
                this.docEditor = new DocsAPI.DocEditor('onlyoffice-editor', config);
            } else {
                console.error('OnlyOffice DocsAPI is 未加载');
            }
        },

        // 清空配置
        destroyEditor() {
            if (this.docEditor) {
                this.docEditor.destroyEditor();
                this.docEditor = null;
            }
        },

        // 获取文件后缀
        getFileExtension(url) {
            return url.split('.').pop().toLowerCase().split('?')[0];
        },

        generateDocumentKey() {
            // 生成唯一文档key，可以基于文件URL或时间戳
            return btoa(this.fileUrl) + '-' + new Date().getTime();
        },

        // 获取文档类型
        getDocumentType(ext) {
            const textFormats = ['txt', 'doc', 'docx', 'odt', 'rtf', 'pdf'];
            const spreadsheetFormats = ['xls', 'xlsx', 'ods', 'csv'];
            const presentationFormats = ['ppt', 'pptx', 'odp'];

            if (textFormats.includes(ext)) return 'text';
            if (spreadsheetFormats.includes(ext)) return 'spreadsheet';
            if (presentationFormats.includes(ext)) return 'presentation';

            return 'text'; // 默认
        }
    },
}
</script>

<style scoped>
.onlyoffice-viewer-container {
    width: 100%;
    height: 900px;
    position: relative;
}

#onlyoffice-editor {
    width: 100%;
    height: 100%;
}
</style>